<template id="banner">
    <div class="ban">
        <swiper :options="swiperOption" ref="mySwiper" id="swiper">
            <!-- slides -->
            <swiper-slide class="swiper_1" v-for="im in img">
               <a :href="im.link"><img :src="im.url" alt=""></a>
            </swiper-slide>
            <!--<swiper-slide class="swiper_1"><img src="../image/banner.jpg" alt=""></swiper-slide>
            <swiper-slide class="swiper_1"><img src="../image/banner.jpg" alt=""></swiper-slide>-->
            <!-- Optional controls -->
        </swiper>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default{
        name: 'banner',
        data() {
            return {
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    autoplay: 3000,
                    direction : 'horizontal',
                    grabCursor : true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    mousewheelControl : true,
                    observeParents:true,
                    loop: true,
                },
               img:[],

            }
        },
        mounted:function(){
            let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=banner';    
            let Data = this.GLOBAL.dataParam();

            this.$ajax.post(url,Data).then((res) => {
                let temp = res.data;
                if(temp.code == 200){
                    this.img = temp.data
                }
            })
        },
        methods:{
            get_link:function(link){
                if(link){
                    window.location.href=link
                }
            }
        },



    };
</script>
<style>
.ban{
    height:3.14rem;
}
    #swiper{
        height:3.14rem;
        width:100%;

    }
#swiper .swiper_1{
    height:3.14rem;
    width:100%;
}
#swiper img{
    display:inline-block;
    height:3.14rem;
    width:100%;
}
</style>
